<template>
  <div class="app_map">
    <div style="display: flex; width: 100%; height: 38%">
      <div class="map_box">
        <div
          id="ciyun"
          style="width: 100%; height: 100%; border: 1px solid #180bcb"
        ></div>
      </div>
      <div class="map_box">
        <div
          id="main"
          style="
            width: 100%;
            height: 100%;
            border: 1px solid #180bcb;
            margin-right: 10px;
          "
          @click="map"
        ></div>
      </div>
      <div class="map_box">
        <div
          id="leida"
          style="width: 100%; height: 100%; border: 1px solid #180bcb"
        ></div>
      </div>
    </div>
    <div style="display: flex; width: 100%; height: 38%">
      <div class="map_box">
        <div
          id="bing"
          style="width: 100%; height: 100%; border: 1px solid #180bcb"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import '@/utils/china';
import { getGeoJson } from '@/utils/getchinavalue';
// 下载chins.js
export default {
  data() {
    return {
      myChart: null,
      ciyunChart: null,
      leidaChart: null,
      bingChart: null,
      geoJsonData: {},
      Option: {
        backgroundColor: 'rgba(255,255,255, 0)',
        // 地理坐标系组件
        geo: [
          {
            type: "map",
            map: 'china',
            // zlevel: -1,
            aspectScale: 1,
            zoom: 0.65,
            label: {
              show: true,
              color: '#fff',
            },
            layoutCenter: ["50%", "65%"],
            layoutSize: "240%",
            roam: true,
            // silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                // borderColor:"rgba(17, 149, 216,0.6)",
                borderColor: "#c0f3fb",
                borderWidth: 1,
                shadowColor: "#8cd3ef",
                shadowOffsetY: 10,
                shadowBlur: 120,
                areaColor: {
                  type: "linear",
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: "rgba(3,27,222,0.75)", // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                  },],
                  global: true, // 缺省为 false
                },
              },
              emphasis: {
                areaColor: "rgba(0,254,233,0.6)",
              },
            },
          }, {
            type: "map",
            map: 'china',
            zlevel: -2,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "66%"],
            layoutSize: "240%",
            roam: true,
            silent: true,
            showLegendSymbol: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                // borderColor: "rgba(57, 132, 188,0.4)",
                borderColor: "rgba(58,149,253,0.6)",
                shadowColor: "rgba(65, 214, 255,1)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "transpercent",
              },
            },
          }, {
            type: "map",
            map: 'china',
            zlevel: -3,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "67%"],
            layoutSize: "240%",
            roam: true,
            silent: true,
            showLegendSymbol: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                // borderColor: "rgba(57, 132, 188,0.4)",
                borderColor: "rgba(58,149,253,0.6)",
                shadowColor: "rgba(65, 214, 255,1)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "transpercent",
              },
            },
          }, {
            type: "map",
            map: 'china',
            zlevel: -4,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "68%"],
            layoutSize: "240%",
            roam: true,
            silent: true,
            showLegendSymbol: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                // borderColor: "rgba(57, 132, 188,0.4)",
                borderColor: "rgba(58,149,253,0.6)",
                shadowColor: "rgba(65, 214, 255,1)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "transpercent",
              },
            },
          }
        ],
        series: [
          {
            type: 'map',
            map: 'Map', //使用,
            blurSize: 5,//阴影的大小
            aspectScale: 0.75,
            geoIndex: 0,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#FFFFFF',
              },
              emphasis: {
                areaColor: "rgba(0,254,233,0.6)",
              }
            },
            // animation: true
          },
        ],
        tooltip: {
          // trigger: 'none',
          formatter: function (params) {
            console.log(params);
            let res = `
              <div>我真帅<div>
            `
            return res
          },
          trigger: 'item',
          backgroundColor: 'rgba(11, 232, 131, 0.7)'
        }
      },
      ciyunoption: {
        tooltip: {
          show: true,
          position: 'top',
          textStyle: {
            fontSize: 10
          }
        },
        series: [{
          type: "wordCloud",
          // 网格大小，各项之间间距
          gridSize: 10,
          // 形状 circle 圆，cardioid  心， diamond 菱形，
          // triangle-forward 、triangle 三角，star五角星
          shape: 'diamond',
          // 字体大小范围
          sizeRange: [10, 40],
          autoSize: {
            enable: true,
            minSize: 6
          },
          // 文字旋转角度范围
          rotationRange: [10, 50],
          // 旋转步值
          // rotationStep: 90,
          // 自定义图形
          // maskImage: maskImage,
          left: 'center',
          top: 'center',
          right: null,
          bottom: null,
          // 画布宽
          width: '90%',
          // 画布高
          height: '80%',
          // 是否渲染超出画布的文字
          drawOutOfBound: true,
          textStyle: {
            color: function () {
              return (
                'rgb(' + [
                  Math.round(Math.random() * 500),
                  Math.round(Math.random() * 300),
                  Math.round(Math.random() * 200)
                ].join(',') +
                ')'
              )
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#2ac'
            }
          },
          data: [
            {
              name: "雨伞",
              value: 30
            },
            {
              name: "晴天",
              value: 28
            },
            {
              name: "电话",
              value: 24
            },
            {
              name: "手机",
              value: 23
            },
            {
              name: "下雨",
              value: 22
            },
            {
              name: "暴雨",
              value: 21
            },
            {
              name: "多云",
              value: 20
            },
            {
              name: "雨衣",
              value: 29
            },
            {
              name: "屋檐",
              value: 28
            },
            {
              name: "大风",
              value: 27
            },
            {
              name: "台风",
              value: 26
            },
            {
              name: "下雪",
              value: 25
            },
            {
              name: "打雷",
              value: 24
            },
            {
              name: "小雨",
              value: 30
            },
            {
              name: "中雨",
              value: 18
            },
            {
              name: "大雨",
              value: 14
            },
            {
              name: "雷阵雨",
              value: 13
            },
            {
              name: "下雪",
              value: 12
            },
            {
              name: "小雪",
              value: 11
            },
            {
              name: "中雪",
              value: 10
            },
            {
              name: "大雪",
              value: 9
            },
            {
              name: "暴雪",
              value: 8
            },
            {
              name: "东风",
              value: 7
            },
            {
              name: "南风",
              value: 6
            },
            {
              name: "西北风",
              value: 5
            },
            {
              name: "北风",
              value: 4
            },
            {
              name: "闪电",
              value: 3
            }
          ]
        }]
      },
      leidaoption: {
        backgroundColor: "rgba(255,255,255,0)",
        tooltip: {
          "show": true,
          "trigger": "item",
        },

        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              //backgroundColor: '#999',
              borderRadius: 3,
              padding: [-10, -10]
            }
          },
          axisLine: {
            lineStyle: {
              color: '#1968a0',
              width: 1,
              type: 'solid'
            },
          },

          splitArea: {
            areaStyle: {

              color: ['#0a1044', '#0f2a5e']
            }
          },
          splitLine: {
            lineStyle: {
              color: ['#19669d', '#19669d', '#19669d', '#19669d'],
              width: 1
            }
          },
          indicator: [{
            text: '家庭聚会',
            max: 1500
          }, {
            text: '商务就餐',
            max: 1500
          }, {
            text: '日常就餐',
            max: 1500
          }, {
            text: '同学聚会',
            max: 1500
          }, {
            text: '朋友聚会',
            max: 1500
          }, {
            text: '情侣约会',
            max: 1500
          }]
        },
        series: [{
          name: '就餐场合',
          type: 'radar',
          symbol: "circle",
          symbolSize: 3,
          areaStyle: {
            normal: {
              color: 'rgba(40,203,228,0.3)'
            },
          },
          itemStyle: {
            color: 'rgba(40,202,206,1)',
            borderColor: 'rgba(40,202,206,.5)',
            borderWidth: 5,
          },

          data: [
            {
              value: ["1200", "1000", "800", "1270", "1365", "1350"],
              name: '就餐场合'
            }],

        }]
      },
      bingoption: {
        color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05'],
        title: {
          text: '园区企业注册区分布',
          textStyle: {
            fontSize: 14,
          },
          top: '0', // 设置标题位于图表的顶部
        },
        tooltip: {
          trigger: 'item',
        },
        label: {
          show: true,
          position: 'outside',
          lineStyle: {
            length: 10, // 连线长度
          },
        },
        series: [
          {
            name: '主要商品月度货值趋势',
            type: 'pie',
            radius: [30, 160],
            center: ['50%', '50%'],
            roseType: 'area',
            data: [
              { value: 40, name: 'rose 1' },
              { value: 38, name: 'rose 2' },
              { value: 32, name: 'rose 3' },
              { value: 30, name: 'rose 4' },
              { value: 28, name: 'rose 5' },
              { value: 26, name: 'rose 6' },
              { value: 22, name: 'rose 7' },
              { value: 18, name: 'rose 8' },
            ],
          },
        ],
      }
    }
  },
  async mounted() {
    this.myChart = echarts.init(document.getElementById('main'));
    this.ciyunHandler()
    this.leidaHandler()
    let res = await getGeoJson(100000)
    this.geoJsonData = res;
    this.Option.series[0].data = res.features;
    echarts.registerMap('china', this.geoJsonData)
    this.myChart.setOption(this.Option);
    this.map()
  },
  methods: {
    map(val) {
      console.log(val);
      this.myChart.on('click', (params) => {
        console.log(params);
        let res = this.geoJsonData.features.find(item => {
          return item.properties.name == params.name
        })
        getGeoJson(res?.properties?.adcode).then(data => {
          this.geoJsonData = data;
          let num = 70
          this.Option.geo = this.Option.geo.map(item => {
            num += 1
            return {
              ...item,
              layoutSize: '500%',
              layoutCenter: ["110%", `${num}%`],
            }
          })
          console.log(this.Option.geo);
          this.Option.series[0].geoIndex = 1;
          echarts.registerMap('china', this.geoJsonData)
          this.myChart.setOption(this.Option);
        })
      })
    },
    ciyunHandler() {
      this.ciyunChart = echarts.init(document.getElementById('ciyun'));
      this.ciyunChart.setOption(this.ciyunoption);
    },
    leidaHandler() {
      this.leidaChart = echarts.init(document.getElementById('leida'));
      this.leidaChart.setOption(this.leidaoption);
    },
    bingHandler() {
      this.bingChart = echarts.init(document.getElementById('bing'));
      this.bingChart.setOption(this.bingoption);
    }
  }

}
</script>

<style lang="scss" scoped>
.app_map {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(16, 23, 225, 0.311);
  .map_box {
    width: 32%;
    height: 100%;
    // background: red;
    margin-right: 10px;
  }
}
</style>